<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
</head>
<body>
<form class="form-horizontal m-t " id="submitForm" method="POST" action="/schedule/modifySchedule">
    <div class="col-md-12">
        <div class="form-group">
            <label class="col-sm-2 control-label">日程标题：</label>
            <div class="col-sm-4">
                <input type="text" name="schedualTitle" th:placeholder="${schedule.getSchedualTitle()}" class="form-control input-sm" /> <span
                    class="help-block m-b-none"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">日程内容：</label>
            <div class="col-sm-4">
                <textarea name="schedualContent" th:text="${schedule.getSchedualContent()}" class="form-control input-sm"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">开始时间：</label>
            <div class="col-sm-10">
                <input class="form-control layer-date" th:placeholder="${schedule.getSchedualStart()}" name="schedualStart"
                       onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"/>
                <label class="laydate-icon"></label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">结束时间：</label>
            <div class="col-sm-10">
                <input class="form-control layer-date" th:placeholder="${schedule.getSchedualEnd()}" name="schedualEnd"
                       onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"/>
                <label class="laydate-icon"></label>
            </div>
        </div>
        <div style="display:block; right: 10px; text-align: right; padding-top:10px ;">
            <input class="btn btn-primary btn-sm" id="submitButton" type="button" value="确认"
                   style="margin-right: 30px;"/>
            <input class="btn btn-file btn-sm" type="button" id="cancelButton" value="取消"/>
        </div>
        <!-- /input-group -->
    </div>
    <input type="hidden" th:value="${schedule.getSchedualId()}" name="schedualId"/>
</form>
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<!--<script th:src="@{/js/jquery.js}"></script>-->
<script th:src="@{/js/bootstrap.min.js}"></script>


<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>
<script th:src="@{/js/jquery.form.js}"></script>

<script>
    $(function () {
        $("#cancelButton").on("click",function () {
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index);
        });
        $("#submitButton").on("click", function () {
            $("#submitForm").ajaxSubmit({
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg(data.msg);
                        setTimeout(function () {
                            parent.location.reload();
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);
                        },1000);
                    } else {
                        layer.msg(data.msg);
                    }
                }
            });
        });
    });
    //外部js调用
    laydate({
        elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus' //响应事件。如果没有传入event，则按照默认的click
    });

    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };

    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);


</script>
</body>
</html>